
<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 返回按钮 -->
      <button 
        @click="$router.back()"
        class="mb-6 flex items-center text-qinghua-blue hover:text-qinghua-light transition-colors"
      >
        <i class="fas fa-arrow-left mr-2"></i>
        返回
      </button>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <!-- 图片展示区域 -->
        <div>
          <div class="bg-white rounded-2xl shadow-lg p-6">
            <div class="aspect-square bg-gradient-to-br from-qinghua-blue to-qinghua-light rounded-xl flex items-center justify-center">
              <div class="text-white text-center">
                <i class="fas fa-cube text-8xl mb-4 opacity-50"></i>
                <h2 class="text-2xl font-bold">{{ doll.name }}</h2>
              </div>
            </div>
            
            <!-- 缩略图 -->
            <div class="grid grid-cols-4 gap-2 mt-4">
              <div 
                v-for="i in 4" 
                :key="i"
                class="aspect-square bg-gray-200 rounded-lg cursor-pointer hover:ring-2 hover:ring-qinghua-blue transition-all"
              ></div>
            </div>
          </div>
        </div>
        
        <!-- 信息区域 -->
        <div>
          <div class="bg-white rounded-2xl shadow-lg p-8">
            <div class="flex items-center justify-between mb-4">
              <h1 class="text-3xl font-bold text-qinghua-blue">{{ doll.name }}</h1>
              <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
                {{ doll.rarity }}
              </span>
            </div>
            
            <p class="text-4xl font-bold text-qinghua-blue mb-6">¥{{ doll.price }}</p>
            
            <div class="space-y-4 mb-8">
              <div>
                <h3 class="font-semibold text-gray-900 mb-2">产品描述</h3>
                <p class="text-gray-600">{{ doll.description }}</p>
              </div>
              
              <div>
                <h3 class="font-semibold text-gray-900 mb-2">材质工艺</h3>
                <p class="text-gray-600">采用高品质树脂材质，手工绘制青花瓷纹理，每一件都是独一无二的艺术品。</p>
              </div>
              
              <div>
                <h3 class="font-semibold text-gray-900 mb-2">尺寸规格</h3>
                <p class="text-gray-600">高度：12cm | 宽度：8cm | 重量：150g</p>
              </div>
            </div>
            
            <!-- 购买按钮 -->
            <div class="space-y-4">
              <button 
                @click="addToCollection"
                class="w-full bg-qinghua-blue text-white py-4 rounded-xl font-semibold hover:bg-opacity-90 transition-all transform hover:scale-105"
              >
                <i class="fas fa-heart mr-2"></i>
                加入收藏
              </button>
              
              <button 
                @click="joinRaffle"
                class="w-full bg-gradient-to-r from-red-500 to-pink-500 text-white py-4 rounded-xl font-semibold hover:opacity-90 transition-all transform hover:scale-105"
              >
                <i class="fas fa-ticket-alt mr-2"></i>
                参与抽签
              </button>
            </div>
            
            <!-- 分享按钮 -->
            <div class="mt-6 flex justify-center space-x-4">
              <button class="text-gray-400 hover:text-qinghua-blue transition-colors">
                <i class="fab fa-weixin text-xl"></i>
              </button>
              <button class="text-gray-400 hover:text-qinghua-blue transition-colors">
                <i class="fab fa-weibo text-xl"></i>
              </button>
              <button class="text-gray-400 hover:text-qinghua-blue transition-colors">
                <i class="fas fa-share-alt text-xl"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCollectionStore } from '@/stores/collection'

const route = useRoute()
const router = useRouter()
const collectionStore = useCollectionStore()

const doll = ref({
  id: parseInt(route.params.id),
  name: '青花仙子',
  price: 299,
  rarity: '限量',
  description: '传统青花瓷纹与现代设计的完美结合，每一个细节都经过精心雕琢，展现出东方美学的独特魅力。'
})

const addToCollection = () => {
  collectionStore.addToCollection(doll.value)
  alert('已添加到收藏！')
}

const joinRaffle = () => {
  router.push('/raffle')
}
</script>
